﻿@model SmartParking.Web.Models.DashboardReservationModel
@{
    ViewBag.Title = "Dashboard";
    var modelAsJSON = new HtmlString(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model));
}

<ul data-role="listview" data-divider-theme="b" data-inset="true">
    <li data-role="list-divider" role="heading">
        Entradas / Salidas
    </li>
    <li data-theme="c">
        <table style="width: 100%">
            <tr>
                <td style="width: 45%">
                    @*<div data-role="fieldcontain">
                        <label for="ddlParking">
                            @Html.DisplayNameFor(model => model.ParkingId)
                        </label>
                        @Html.DropDownListFor(model => model.ParkingId, Model.Parkings,
                            new { data_native_menu = "true" })
                    </div>*@
                    <div data-role="fieldcontain">
                        <label for="selectmenu1">
                            Parqueo:
                        </label>
                        <select id="selectmenu1" name="">
                            <option value="option1">
                                Option 1
                            </option>
                        </select>
                    </div>
                </td>
                <td style="width: 10%">
                </td>
                <td style="width: 45%">
                    @*<div data-role="fieldcontain">
                        <label for="ddlParkingZone">
                            @Html.DisplayNameFor(model => model.ParkingZoneId)
                        </label>
                        @Html.DropDownList("ddlParkingZone", Model.ParkingZones,
                            new { data_native_menu = "true" })
                    </div>*@
                    <div data-role="fieldcontain">
                        <label for="selectmenu2">
                            Zona:
                        </label>
                        <select id="selectmenu2" name="">
                            <option value="option1">
                                Option 1
                            </option>
                        </select>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div data-role="fieldcontain" style="width: 100%">
                        <input name="" id="textinput1" placeholder="Placa" value="" type="text" style="width: 100%">
                    </div>
                </td>            
                <td>
                </td>
                <td>
                    <input type="submit" value="Submit">
                </td>
            </tr>
        </table>
    </li>
    <li data-role="list-divider" role="heading">
        Uso / Disponibilidad
    </li>
    <li data-theme="c">
        <table style="width: 100%">
            <tr>
                <td style="width: 30%; text-align: right">
                    <a href="#"><<</a>
                </td>
                <td style="width: 30%; text-align: center">
                    <h3>@Model.Schedule.Date.ToShortDateString()</h3>
                </td>
                <td style="width: 30%; text-align: left">
                    <a href="#">>></a>
                </td>
            </tr>
        </table>
        <div style="width: 100%">
            <table data-role="table" data-mode="reflow" class="ui-responsive table-stroke ui-table ui-table-reflow" style="width: 100%; font-size: 12px">                
                <thead>
                    <tr>
                        <th data-priority="1" title="Hora">Hora</th>
                        <th data-priority="2"><abbr title="Disponibles">D</abbr></th>
                        <th data-priority="3" title="En Uso">U</th>
                        <th data-priority="4" title="Reservados">R</th>
                        <th data-priority="5" title="Resevables">RR</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.Schedule.Items)
                    {
                    <tr class="@item.CssStyle">
                        <th><b class="ui-table-cell-label"></b>@item.Time</th>
                        <td><b class="ui-table-cell-label"></b>@item.Availables</td>
                        <td><b class="ui-table-cell-label"></b>@item.InUse</td>
                        <td><b class="ui-table-cell-label"></b>@item.Reserved</td>
                        <td><b class="ui-table-cell-label"></b>@item.Reservables</td>
                    </tr>
                    }
                </tbody>              
            </table>
        </div>
    </li>
</ul>


@*<div data-role="collapsible-set" data-theme="b" data-content-theme="e">
    <div id="parkingInfo" data-role="collapsible" data-collapsed="false">
        <h3>
            Información del Parqueo
        </h3>
        <div data-role="fieldcontain">
            <label for="ddlParking">
                @Html.DisplayNameFor(model => model.ParkingId)
            </label>
            @Html.DropDownList("ddlParking", Model.Parkings,
                new { data_native_menu = "false" })
        </div>
        <div data-role="fieldcontain">
            <label for="ddlParkingZone">
                @Html.DisplayNameFor(model => model.ParkingZoneId)
            </label>
            @Html.DropDownList("ddlParkingZone", Model.ParkingZones,
                new { data_native_menu = "false" })
        </div>
    </div>
    <div id="reservationInfo" data-role="collapsible" data-collapsed="true">
        <h3>
            Información de Reservación
        </h3>
        <div data-role="fieldcontain">
            <label for="lbPriceHourAndComission">
                Precio/Hora
            </label>
            <input id="lbPriceHourAndComission" name="lbPriceHourAndComission" type="text" value="[$PHXXX] + [$CXXX] comisión" style="visibility: hidden;" readonly="readonly"/>
        </div>
        <div data-role="fieldcontain">
            <label for="tboxDate">
                @Html.DisplayNameFor(model => model.Date)
            </label>
            <input id="tboxDate" name="tboxDate" type="date" value=@Model.Date
                class="text-box single-line" data-val="true" data-val-required="El campo Fecha es requerido."
                data-role="datebox" data-options='{"mode": "calbox", "useFocus": true, "overrideDateFormat": "%d/%m/%Y"}' readonly="readonly"/>
        </div>
        <div data-role="fieldcontain">
            <label for="ddlStartHour">
                @Html.DisplayNameFor(model => model.StartHour)
            </label>
            @Html.DropDownList("ddlStartHour",
                new SelectList(Model.OpenHours, Model.StartHour),
                new { data_native_menu = "false" })
        </div>
        <div data-role="fieldcontain">
            <label for="ddlEndHour">
                @Html.DisplayNameFor(model => model.EndHour)
            </label>
            @Html.DropDownList("ddlEndHour",
                new SelectList(Model.CloseHours, Model.EndHour),
                new { data_native_menu = "false" })
        </div>
        <div data-role="fieldcontain">
            <label for="tboxCarPlate">
                @Html.DisplayNameFor(model => model.CarPlate)
            </label>
            @Html.EditorFor(model => model.CarPlate, "", "tboxCarPlate")
        </div>
    </div>
</div>
<input id="cmdReserve" type="submit" data-icon="arrow-r" data-iconpos="right" value="Reservar">

@section styles {
    <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
    <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" /> 
}

@section scripts {
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>

    <script type='text/javascript'>
        $(document).ready(function () {
            window.MVJSON = @modelAsJSON;
        });

        $(document).on("click", "#cmdReserve", null, function() {
            var url = "@Url.Action("Reserve")";
            var url2 = "@Url.Action("Reservations")";
            doMobileReserve(window.MVJSON, url, url2);
        });

        $(document).on("change", "#ddlParking", null, function() {
            var url = "@Url.Action("RefreshModel")";
            doSelectParking(window.MVJSON, url);
            $("#ddlParkingZone").empty();
            $("#ddlStartHour").empty();
            $("#ddlEndHour").empty();
        });

        $(document).on("change", "#ddlParkingZone", null, function() {
            var url = "@Url.Action("RefreshModel")";
            doSelectParkingZone(window.MVJSON, url);            
            $("#parkingInfo").trigger("collapse");
            $("#ddlStartHour").empty();
            $("#ddlEndHour").empty();
            $("#reservationInfo").trigger("expand");
            $("#tboxDate").focus();
        });

        $(document).on("change", "#ddlStartHour", null, function() {
            var url = "@Url.Action("RefreshModel")";
            doSelectStartHour(window.MVJSON, url);
        });

        $(document).on("change", "#ddlEndHour", null, function() {
            $("#tboxCarPlate").focus();
        });
    </script>
}*@

@section styles {
    .table-stroke thead th {
      border-bottom: 1px solid rgba(0, 0, 0, .1);
    }
    .table-stroke tbody th,
    .table-stroke tbody td {
      border-bottom: 1px solid rgba(0, 0, 0, .05);
    }
    /* Add alternating row stripes */
    .table-stripe tbody tr:nth-child(odd) td,
    .table-stripe tbody tr:nth-child(odd) th {
      background-color: rgba(0,0,0,0.04);
    }
    /* Add stroke to the header and last item */
    .table-stripe thead th,
    .table-stripe tbody tr:last-child {
      border-bottom: 1px solid rgba(0, 0, 0, .1);
    }
}